// src/components/Gauge.jsx
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);

const Gauge = () => {
    const chartRef = useRef(null); // 用 useRef 创建 DOM 引用

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        const option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
            },
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    radius: '100%',  // 让仪表盘更大
                    detail: { formatter: '{value}' },
                    data: [{ value: 50, name: 'SCORE' }],
                },
            ],
        };

        chart.setOption(option);

        // 在组件卸载时销毁图表
        return () => {
            chart.dispose();
        };
    }, []);

    return (
        <div
            ref={chartRef}
            style={{ width: '300px', height: '300px' }}
        />
    );
};

export default Gauge;
